<template>
  <div id="left">
    <el-menu
      :default-active="active"
      class="menu"
      background-color="#545c64"
      text-color="#ffffff"
      active-text-color="#ffd04b"
    >
      <template v-for="nav in menu">
        <el-submenu v-if="nav.children" :index="nav.path" :key="nav.path">
          <template slot="title">
            <i :class="nav.icon"></i>
            <span>{{nav.name}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="nav2 in nav.children"
              :key="nav2.path"
              :index="nav2.path"
              @click="link(nav2.path)"
            >{{nav2.name}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item v-else :index="nav.path" :key="nav.path" @click="link(nav.path)">
          <i :class="nav.icon"></i>
          <span slot="title">{{nav.name}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script type="text/ecmascript-6">
import { menu } from '@/config'

export default {
  name: 'slidebar',
  data() {
    return {
      active: '/index',
      menu: menu,
      isCollapse: false
    }
  },
  created() {
    this.active = window.location.hash.replace('#', '')
  },
  methods: {
    link(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.el-submenu__title i,.el-menu-item i
  color #eeeeee
</style>

<style scoped lang="stylus" rel="stylesheet/stylus">
#left
  width 200px
  overflow hidden
  .menu
    height calc(100vh - 50px)
    text-align: left
</style>